import React, { Component } from 'react'
import { Table, Row, Col, Button, Input, Pagination } from 'antd'
import { userReduce } from './user.action'
import './user.scss'
import onChange from '../../decorators/onChange'
import { isMobile } from '../../utils/string'
import msg from '../components/msg'

@userReduce
export default class extends Component {
  constructor(props) {
    super(props)
  }
  param = () => ({
    page: this.props.userList.page,
    pageSize: this.props.userList.pageSize,
    filter: this.props.userList.filter,
    sort: this.props.userList.sort
  })
  componentDidMount() {
    this.initTableData(this.param())
  }
  initTableData = param => {
    //获取userList
    this.props.getUserList(param)
  }

  render() {
    let attr = {
      //filter
      filterAttr: {
        fromObj: { name: '', phone: '' },
        onSearch: filter => this.initTableData({ ...this.param(), page: 1, filter })
      },
      //表格
      tableAttr: {
        rowKey: 'id',
        pagination: false,
        columns: this.props.userTableHeader,
        dataSource: this.props.userList.list,
        onChange: (pagination, filters, sorter) => {
          this.initTableData({
            ...this.param(),
            page: 1,
            sort: {
              name: sorter.columnKey,
              order: sorter.order
            }
          })
        }
      },
      //分页
      attrPagination: {
        current: this.props.userList.page,
        total: this.props.userList.total,
        onChange: page => this.initTableData({ ...this.param(), page })
      }
    }
    return (
      <div className="user-content">
        {/*过滤条件*/}
        <div className="filter-com">
          <Filter {...attr.filterAttr} />
        </div>
        {/*用户列表-表格*/}
        <div className="user-table">
          <Table {...attr.tableAttr} />
        </div>
        <div className="pagination-css">
          <Pagination {...attr.attrPagination} />
        </div>
      </div>
    )
  }
}

//############
//子组件
//############
/**
 * 表格上面的过滤条件
 * @return {*}
 * @constructor
 */
@onChange
class Filter extends Component {
  onSearch = () => {
    let { onSearch, fromObj } = this.props
    //验证
    if (fromObj.phone !== '' && !isMobile(fromObj.phone)) return msg.error('请输入有效的手机号码！')

    //查询条件
    let search = {
      name: [fromObj.name],
      phone: [fromObj.phone]
    }
    //改变表格
    onSearch(search)
  }
  render() {
    let { fromObj, handChange } = this.props
    return (
      <div>
        <Row>
          <Col span={3}>
            <div className={'filter-left'}>用户名：</div>
          </Col>
          <Col span={5}>
            <Input value={fromObj.name} {...handChange('name')} />
          </Col>
          <Col span={3}>
            <div className={'filter-left'}>手机号码：</div>
          </Col>
          <Col span={5}>
            <Input value={fromObj.phone} {...handChange('phone')} maxLength={11} />
          </Col>
          <Col span={1} />
          <Col span={5}>
            <Button onClick={this.onSearch}>查询</Button>
          </Col>
        </Row>
      </div>
    )
  }
}
